<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
        *{
            margin:0;
            padding: 0;
        }

        .product{
            width:234px;
            height:300px;
            background-color: white;
            /*解决盒子塌陷的问题*/
            overflow: hidden;
        }

        .product  .wrapper{
            background-color: brown;
            margin-top: 20px;
            margin-bottom: 20px;
            /*包裹的行内元素、行内块元素水平居中*/
            text-align: center;
        }
        .product .wrapper img{
            width:160px;
            height:160px;
            margin-bottom: 18px;
        }

        .wrapper  h3{
            font-size:14px;
            font-weight: normal;
            color: #333333;
        }

        /*p标签应该是块元素 w1-d2-18课*/
        .wrapper .dec{
            height:18px;
            line-height: 18px;
            font-size: 12px;
            color: #b0b0b0;
            margin-bottom: 10px;
        }
        .wrapper .des
        {
            font-size: 14px;
            color: #ff6700;
        }

    </style>
</head>
<body>
<div class="product">
    <div class="wrapper">
        <img src="/static/images/examle/xiaomi12s.webp" alt="que">
        <h3>Xiaomi 12S Pro</h3>
        <p class="dec">骁龙8+ 旗舰处理器 | 徕卡影像</p>
        <p class="des">5999元起</p>
    </div>
</div>

</body>
</html>